<template>
  <q-dialog v-model="showDialog" maximized flat persistent>
    <q-form class="column dialog_card" @submit="changePassWord" style="width:800px;">
      <h5 class="view_title justify-between q-px-md">
        修改密码
        <q-btn dense outline round icon="clear" size="sm" v-close-popup />
      </h5>
      <q-scroll-area class="col">
        <div class="row q-col-gutter-x-md dialog_form q-pa-md">
          <div class="col row">
            <div class="col-12">
              <h5>用户账号：</h5>
              <q-input outlined readonly dense v-model="userInfo.username" />
            </div>
            <div class="col-12">
              <h5>
                <q-icon name="star" color="red" />原始密码：
              </h5>
              <q-input outlined dense type="password" v-model="userInfo.oldPassword" />
            </div>
            <div class="col-12">
              <h5>
                <q-icon name="star" color="red" />新密码：
              </h5>
              <q-input outlined dense type="password" v-model="userInfo.password" :rules="rules" />
            </div>
            <div class="col-12">
              <h5>
                <q-icon name="star" color="red" />确认新密码：
              </h5>
              <q-input outlined dense type="password" v-model="userInfo.confirmpassword" :rules="rules" :error="!isValid">
                <template v-slot:error>两次输入密码不一致！</template>
              </q-input>
            </div>
          </div>
        </div>
      </q-scroll-area>
      <div class="row justify-center q-pa-md">
        <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
        <q-btn class="q-mx-md" color="primary" :loading="loading" icon="mdi-check-bold" label="保存" type="submit" />
      </div>
    </q-form>
  </q-dialog>
</template>

<script>
import { requiredTest } from 'boot/inputTest';

export default {
  components: {},
  props: {
    username: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      showDialog: false,
      loading: false,
      rules: [requiredTest],
      userInfo: {
        username: null,
        oldPassword: null,
        password: null,
      }
    };
  },
  watch: {},
  computed: {
    isValid() {
      if (this.userInfo.confirmpassword && this.userInfo.password && this.userInfo.confirmpassword !== this.userInfo.password) {
        return false;
      }
      return true;
    },
  },
  methods: {
    show() {
      this.userInfo.username = this.username;
      this.updPsw();
    },
    requiredTest,
    changePassWord() {
      if (this.isValid) {
        this.$axios.put('/sys/user/changePassword', this.userInfo).then((r) => {
          this.$info(r.message);
          this.showDialog = false;
        });
      }
    },
    updPsw() {
      this.rules = [requiredTest];
      this.$axios.get(`/sys/company/getTenantInfo?username=${this.username}`).then(({ result }) => {
        const {
          pswMsg, minLength, maxLength, pswStrength
        } = result;
        if (!minLength || !maxLength) {
          this.$error('请管理员设置，密码最大和最小长度');
          return;
        }
        this.rules.push((val) => {
          let t = null;
          if (val.length < parseInt(minLength, 10) || val.length > parseInt(maxLength, 10)) {
            t = `要求密码长度为[${minLength} - ${maxLength}] 个字符`;
          }
          return t;
        });
        if (pswStrength && pswMsg) {
          this.rules.push((val) => {
            let t = null;
            const p = new RegExp(pswStrength, 'g');
            if (val && !p.test(val)) {
              t = pswMsg;
            }
            return t;
          });
        }
        this.showDialog = true;
      });
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus">
</style>
